<template>
  <div>
      <el-form :model="userForm" label-width="100px" :class="{demo_ruleForm : flag}">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="update" :disabled="flag">修改</el-button>
        </el-form-item>
      </el-form>
    <dialog-cp :list.sync="userForm" v-if="flag" :flag.sync="flag"></dialog-cp>
  </div>
</template>

<script>
import DialogCp from './components/dialog.vue'
export default {
  name: 'DialogApp',
  components: {
    DialogCp
  },
  data () {
    return {
      userForm: {
        username: 'chers',
        nickname: 'summary',
        email: '999999@wb.com'
      },
      flag: false
    }
  },

  mounted () {

  },

  methods: {
    update () {
      this.flag = true
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
  height: 300px;
}
.demo_ruleForm::after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
}
</style>
